<div id="app" v-cloak>
    <div class="flex-column padding20">
        <el-steps style="width: 100%" :active="step" align-center>
            <el-step title="检查环境" description="检查必要扩展" ></el-step>
            <el-step title="配置数据库" description="修改数据库连接和配置" ></el-step>
            <el-step title="后台配置" description="后台账号名称配置" ></el-step>
        </el-steps>
        <div v-if="(step == 0 || step==1)&&stepSuccess==false" class="flex-column flex-item-center">
            <el-table :data="stepList" border style="width: 60%;margin-top: 30px">
                <el-table-column prop="title" label="检查项"  ></el-table-column>
                <el-table-column prop="name" label="标识" ></el-table-column>
                <el-table-column prop="value" label="数据"  ></el-table-column>
                <el-table-column prop="desc" label="描述"  ></el-table-column>
                <el-table-column prop="status" label="状态" >
                    <template #default="{row}" style="color: #0a6501">
                        <el-icon v-if="row.status==`success`" color="#0a6501">
                            <Component :is="`Select`"></Component>
                        </el-icon>
                        <el-icon v-if="row.status==`error`" color="#f00">
                            <Component :is="`CloseBold`"></Component>
                        </el-icon>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex-row" v-if="stepList.length>0">
                <el-button type="primary" style="margin-top: 30px" @click="cxChank">重新检查</el-button>
                <el-button type="primary" style="margin-top: 30px" @click="stepSuccess=true" v-if="step==1">下一步</el-button>
            </div>
        </div>
        <div v-if="(step==1 || step==2)&&stepSuccess==true" class="flex-column flex-item-center">
            <div style="width: 700px;margin-top: 30px">
                <el-form ref="form" :model="databases" :rules="rules" label-width="280px">
                    <el-form-item label="数据库类型" prop="type">
                        <el-select
                                v-model="databases.type"
                                placeholder="请选择数据库类型"
                                size="large"
                        >
                            <el-option
                                    v-for="item in dataTypeList"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据库名称" prop="database">
                        <el-input v-model="databases.database" placeholder="请输入数据库名称" size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库地址" prop="hostname">
                        <el-input v-model="databases.hostname" placeholder="请输入数据库地址" size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库端口" prop="hostport">
                        <el-input v-model="databases.hostport" placeholder="请输入数据库端口" size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库用户名" prop="username">
                        <el-input v-model="databases.username" placeholder="请输入数据库用户名" size="large" @blur="linkData"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库密码" prop="password">
                        <el-input v-model="databases.password" placeholder="请输入数据库密码" size="large" @blur="linkData"></el-input>
                    </el-form-item>
                    <el-form-item label="编码格式">
                        <el-input v-model="databases.charset" placeholder="请输入数据库编码格式" size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="数据表前缀">
                        <el-input v-model="databases.prefix" placeholder="请输入数据表前缀" size="large"></el-input>
                    </el-form-item>
                    <el-form-item label="断线重连">
                        <el-switch v-model="databases.break_reconnect" ></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="stepSuccess=false">上一步</el-button>
                        <el-button type="primary" @click="addData" v-if="stepSuccess==true&&step==2">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-if="stepSuccess==false&&(step==2||step==3)" class="flex-column flex-item-center">
            <div style="width: 700px;margin-top: 30px">
                <el-form ref="myrules" :model="config_new" :rules="config_rules"  label-width="280px">
                    <el-form-item label="网站名称" prop="site_name">
                        <el-input v-model="config_new.site_name" placeholder="请输入网站名称" size="large" @input="configRules"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员账号" prop="username">
                        <el-input v-model="config_new.username" placeholder="请输入网站名称" size="large" @input="configRules"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员密码" prop="password">
                        <el-input v-model="config_new.password" placeholder="请输入管理员密码" type="password" show-password size="large" @input="configRules"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="stepSuccess=true">上一步</el-button>
                        <el-button type="primary" @click="changeDatas" v-if="step==3">同步信息</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-if="stepSuccess==true&&step==3" class="flex-column flex-item-center">
            <div style="width: 70px;margin-top: 70px" class="shou" @click="gotoAdmin">
                <el-image src="/app/muadmin/image/web.png" style="width: 70px" fit="contain"></el-image>
                <span>前往后台</span>
            </div>
        </div>
    </div>
</div>
<style>

</style>